<template>
	<view class="mainbgc" style="overflow: hidden;">
		<view class="margin_top">
			<u-tabs :list="list1" @click="click" lineColor="rgba(220, 180, 144, 1)"
				:activeStyle="{ color: '#3c3b3a', fontWeight: 'bold',}"></u-tabs>
		</view>
		<view class="mainpadding ">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="flexleft">
					<view class="month" :class="index==time?'huang':'hui'" v-for="(item,index) in list1[current].son" :key="index" @click="monthList(item,index)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 文章-->
		<view class="zwtimg flexcenter" v-if="!list.data.length">
			<image src="https://qnwenbo.yuntaiqi.com/uploads/20230527/1d30ad56c2b2a57fdf222904874e20e4.png" mode=""></image>
		</view>
		<view class="nav mainpadding ffffff" v-for="item in list.data" :key="item.id" @click="lbtclick(item)">
			<view class="flexbetween">
				<view>
					<view class="word">{{item.name}}</view>
					<view class="margin_top4 year">{{item.createtime}}</view>
				</view>
				<view class="">
					<image :src="item.thumb_image" mode="" class="img"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				time: 0,
				current: 0,
				list1: [],
				page:1,
				pagesize:10,
				month:"",//月份
				category_id:"",//二级分类id
				category_one:"",//一级分类
				list:{
					data:[]
				},//文章列表
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				httpRequest.request('/api/banner/articlecategory', 'POST', {}).then(res => {
					if (res.code == 1) {
						this.list1 = res.data
						this.category_one=res.data[0].id
						this.getList()
					}
				}).catch(err => {
					httpRequest.toast(err.msg)
				})
			},
			getList(isPage,page) {
				let _this=this
				httpRequest.request('/api/banner/articlelist', 'POST', {
					page: page || 1,
					pagesize:this.pagesize,
					category_one:this.category_one,
					category_id:this.category_id
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
					
				}).catch(err => {
					httpRequest.toast(err.msg)
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getList(true, page);
			},
			click(e) { //一级
				this.current = e.index;
				this.category_one=e.id
				this.getList()
			},
			monthList(item,index){
				this.time=index
				this.category_id=item.id
				this.getList()
			},
			lbtclick(item) {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + item.href
					// page.json定义的路径 传url 到webview界面去接收 实现跳转
				})
				// 获取当前点击轮播图下标
				// console.log(index)
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-tabs__wrapper__nav__item {
		flex: 1;
		background-color: #fff;
	}
	/deep/.u-tabs__wrapper__nav__item__text{
		white-space: nowrap;
	}
	.img {
		width: 235rpx;
		height: 151rpx;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
	}

	.month {
		font-size: 24rpx;
		font-weight: 500;
		padding: 10rpx 35rpx;
		margin-right: 30rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		white-space: nowrap;
	}

	.huang {
		color: #DCB490;
		background-color: RGBA(247, 243, 239, 1);
	}

	.hui {
		color: RGBA(63, 63, 63, 1);
		background-color: RGBA(239, 239, 239, 1);
	}

	.word {
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.year {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.nav {
		margin-bottom: 30rpx;
	}
</style>